<template>
  <div>
    <a-form :model="form" layout="vertical" @submit-success="submit">
      <a-card :bordered="false">
        <a-form-item :label="t['设备ID']" :disabled="disabled">
          <a-input v-model="form.mediaId" :max-length="16" allow-clear></a-input>
        </a-form-item>
        <a-form-item :label="t['区域']">
          <a-input v-model="form.location" allow-clear></a-input>
        </a-form-item>
        <a-form-item :label="t['MAC地址']" :disabled="disabled">
          <a-input v-model="form.mac" allow-clear></a-input>
        </a-form-item>
        <template>
          <div>
            <div>{{ t["条形码配置"] }}</div>
            <div class="flex gap-4">
              <a-form-item :label="t['水平偏移']">
                <a-input-number :min="0" v-model="form.offsetX" />
              </a-form-item>
              <a-form-item :label="t['垂直偏移']">
                <a-input-number :min="0" v-model="form.offsetY" />
              </a-form-item>
            </div>
          </div>
          <a-form-item :label="t['屏幕亮度']">
            <a-slider :min="0" :max="100" v-model="form.brightness"></a-slider>
          </a-form-item>

          <a-form-item :label="t['屏幕声音']">
            <a-slider :min="0" :max="100" v-model="form.volume"></a-slider>
          </a-form-item>
          <a-form-item :label="t['翻转']" :disabled="disabled">
            <a-radio-group
              :options="translateOptions(isOptions)"
              v-model="form.screenFlip"
              allow-clear
            >
            </a-radio-group>
          </a-form-item>
        </template>
        <!-- <a-form-item :label="t['尺寸选择']" :disabled="disabled">
          <a-select
            v-model="form.resolutionId"
            allow-clear
            :options="librarySizeOptions"
          ></a-select>
          {{ form.resolutionId }}
        </a-form-item> -->
        <a-button :loading="loading" long type="primary" html-type="submit">
          {{ t["确定"] }}
        </a-button>
      </a-card>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { createMedia, updateMedia } from "@/api/service/lcd-device/lcd-device";

import { userStore } from "@/store/modules/user/user";

import { isOptions } from "../../menu/data";
import { getTagSize, list } from "../data/curd";
import { form, resetForm, showForm } from "../data/form";

const t = translate("公共模块");
const userInfo = userStore();

const disabled = computed(() => {
  return !userInfo.$state.user.admin;
});
const loading = ref(false);
const submit = async () => {
  loading.value = true;
  if (form.value.deptId) {
    await updateMedia(form.value);
  } else {
    await createMedia(form.value);
  }
  loading.value = false;
  list();
  resetForm();
  showForm.value = false;
};

onMounted(() => {
  getTagSize();
});
</script>

<style lang="scss" scoped></style>
